<template>
  <div class="sa p-20">
    <el-row :gutter="20">
      <el-col :span="18"><div class="sa-content">
        <ul class="sa-ul-time sa-float-r">
          <li @click="cxVipTime(1)">Y</li>
          <li @click="cxVipTime(2)">M</li>
          <li @click="cxVipTime(3)">D</li>
          <li @click="cxVipTime(4)">H</li>
          <li @click="cxVipTime(5)">M</li>
          <li @click="cxVipTime(6)">S</li>
          <li>
            <el-button type="primary" class="bt-export" @click="drawer = true">
              <i class="el-icon-search" />
              Find</el-button>
            <!--          抽屉-->
            <el-drawer
              :visible.sync="drawer"
              direction="rtl"
            >
              <ul class="nav-ul">
                <li>
                  <h5 class="tc-menu-title ptb-15">指定店铺数据分析</h5>
                  <el-select
                    v-model="shopname"
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in shopName"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select></li>
                <li>
                  <h5 class="tc-menu-title ptb-15">指定时间段内销售额趋势</h5>
                  <el-date-picker
                    v-model="timeBefore"
                    type="datetime"
                    placeholder="开始时间"
                  />
                  <hr>
                  <el-date-picker
                    v-model="timeAfter"
                    type="datetime"
                    placeholder="结束时间"
                  />
                </li>
                <li>
                  <h5 class="tc-menu-title ptb-15">指定卷烟名称</h5>
                  <el-select
                    v-model="commodityQrline"
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in Smoke_name_options"
                      :key="item.numberShop"
                      :label="item.nameShop"
                      :value="item.numberShop"
                    />
                  </el-select></li>
                <li>
                  <el-button type="primary" @click="select" style="width: 150px;margin-top: 10px">
                    查询</el-button>
                </li>
              </ul>
            </el-drawer>
          </li>
        </ul>
        <h5 class="sa-title">时间</h5>
        <div class="card-body">
          <ve-Line :data="lineList" :extend="lineExtend" />
        </div>
      </div></el-col>
      <el-col :span="6"><div class="sa-content">
        <el-button type="primary" class="sa-float-r bt-export" @click="exportExcel">
          <i class="el-icon-tickets" />
          Export</el-button>
        <h5 class="sa-title">卷烟排行</h5>
        <div class="mt-21">
          <el-table
            :data="AllList"
            height="500"
            style="width: 100%"
          >
            <el-table-column
              prop="name"
              label="名称"
            />
            <el-table-column
              prop="number"
              label="数量"
            />
          </el-table>
        </div>
      </div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    this.lineExtend = {
      series: {
        symbol: 'none',
        lineStyle: {
          color: '#43D39E'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(217, 246, 236, 1)' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(217, 246, 236, 0)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
        markPoint: {
          data: [{
            type: 'max'
          },
          {
            type: 'min'
          }]
        }
      },
      dataZoom: [{
        start: 0,
        end: 100,
        type: 'inside',
        show: true
      },
      {
        type: 'inside',
        show: true
      }],
      xAxis: [{
        axisLine: {
          show: false
        },
        data: {
          textStyle: {
            color: 'red'
          }
        }
      }],
      yAxis: [{
        axisLine: {
          show: false
        }
      }]
    }
    return {
      shopName: [],
      shopname: '',
      drawer: false,
      timeAfter: '',
      timeBefore: '',
      commodityQrline: '',
      Smoke_name_options: [],
      lineList: {
        columns: ['name', 'number'],
        rows: []
      },
      AllList: []

    }
  },
  created() {
    this.selectshopName()
    this.Select_Smoke_defult_name()
  },
  methods: {
    defult_loading() {
    },
    Select_Smoke_defult_name() {
      this.$axios.post(`shop/SmokeAllName`)
        .then(res => {
          this.Smoke_name_options = res.data
          this.Smoke_name_options.push({ nameShop: '全部香烟', numberShop: '全部香烟' })
        })
    },
    time_String(date) {
      var year = date.getFullYear()
      var month = (date.getMonth() + 1).toString()
      var day = (date.getDate()).toString()
      if (month.length === 1) {
        month = '0' + month
      }
      if (day.length === 1) {
        day = '0' + day
      }
      var hours = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours())
      var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes())
      var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
      // eslint-disable-next-line no-unused-vars
      return year + month + day + hours + m + s
    },
    selectshopName: function() {
      this.$axios.post(`first/shop/name`)
        .then(res => {
          // eslint-disable-next-line no-unused-vars
          var ListShop = []
          for (var i = 0; i < res.data.length; i++) { ListShop.push({ 'value': res.data[i], 'label': res.data[i] }) }
          this.shopName = ListShop
        })
    },
    select: function() {
      this.defult_loading()
      var data_1 = new URLSearchParams()
      data_1.append('befor', this.time_String(this.timeBefore))
      data_1.append('lafter', this.time_String(this.timeAfter))
      data_1.append('shop_name', this.shopname)
      data_1.append('commodity_qrline ', this.commodityQrline)
      this.$axios.post(`first/imgtable/Shoptime`, data_1)
        .then(res => {
          this.AllList = res.data
        })
      this.cxVipTime(1)
    },
    cxVipTime(i) {
      var data = new URLSearchParams()
      data.append('befor', this.time_String(this.timeBefore))
      data.append('lafter', this.time_String(this.timeAfter))
      data.append('shop_name', this.shopname)
      data.append('VeLineId', i)
      data.append('commodity_qrline', this.commodityQrline)
      this.$axios.post(`first/imgtable/sex_mon`, data)
        .then(res => {
          this.lineList.rows = res.data
        })
      this.drawer = false
    },
    exportExcel() {
      require.ensure([], () => {
        console.log('dada')
        // eslint-disable-next-line camelcase
        const { export_json_to_excel } = require('@/vendor/Export2Excel.js')// 注意这个Export2Excel路径
        const tHeader = ['品种', '数量'] // 上面设置Excel的表格第一行的标题
        const filterVal = ['name', 'number'] // 上面的index、nickName、name是tableData里对象的属性key值
        var list = this.AllList // 把要导出的数据tableData存到list
        var data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '店铺分析')// 最后一个是表名字
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}
</script>
<style scoped>
  .sa{
    background-color: rgb(240, 242, 245);
    font-size:  0.875rem;
    font-weight: 400;
    color: #2e3136;
    display: block;
    font-family: "Nunito Sans",sans-serif;
  }
  .el-table{
    font-size: 12px !important;
  }
  .el-table .cell{
    line-height: 14px !important;
    font-size: 14px !important;
  }
  .sa h1,h2,h3,h4,h5,h6,h7{
    padding: 0;
    margin: 0;
    font-weight: 600;
  }
  .sa-title{
    font-size: 1rem;
    font-weight: 600;
  }
  .sa ul{
    list-style: none;
    margin: 0;
  }
  .p-20{
    padding: 20px;
  }
  .mt-21{
    margin-top: 21px;
  }
  .sa-content{
    background-color: white;
    padding: 20px;
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    -webkit-box-shadow: 10px 10px 6px -7px rgba(0,0,0,0.05);
    -moz-box-shadow: 10px 10px 6px -7px rgba(0,0,0,0.05);
    box-shadow: 10px 10px 6px -7px rgba(0,0,0,0.05);
  }
  .sa-float-r{
    float: right;
  }
  .sa-ul-time{
    font-size: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #6c757d;
  }
  .sa-ul-time li{
    padding: 0px 12px;
    font-weight: 400;
  }
  .bt-export{
    padding: 8px 12px;
    background-color: #5369f8;
    font-size: .76562rem;
  }
  .tc-menu-title{
    font-size: 1.04rem;
  }
  .ptb-15{
    padding: 15px 0px;
  }
</style>
